<script setup>
//引入封装之后的axios网络请求
import { fetch7DayData } from "../api/weatherAPI";
import { initTemWeekEcharts } from "../util/echarts"
import { ref, watch } from 'vue';
//引入dayjs日期库
import dayjs from 'dayjs';
// 声明一个响应式数据，用来存放未来24小时天气的数据
const day7 = ref([])
const updateTime = ref("")
//声明三个响应式数据，分别存放未来7天的预报时间,最高温度,最低温度
const day7FxDate = ref([])
const day7TempMax = ref([])
const day7TempMin = ref([])
//1.声明一个图表库所需的获取dom元素的引用
var chartDom = ref(null)

//引入状态管理
import { useCityStore } from "../stores/cityStore";
const cityStore = useCityStore()
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数，当数据源有变化时，需要做的事情
  () =>{
    getData(cityStore.location.id)
  },
  //第3个参数，即时回调，初始状态执行一个回调函数【网络请求未来24小时天气预报数据函数】
  { immediate: true}
)


//封装axios后的网络请求函数
async function getData(locationID) {
  const res = await fetch7DayData(locationID)
  // console.log(res)
  day7.value = res.daily
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日HH时mm分')
  //每次发起网络请求时把未来7日的时间，最高温度和最低温度初始化为空
  day7FxDate.value = []
  day7TempMax.value = []
  day7TempMin.value = []

  day7.value.forEach(element => {
    day7FxDate.value.push(element.fxDate)
    day7TempMax.value.push(element.tempMax)
    day7TempMin.value.push(element.tempMin)
  })
  initTemWeekEcharts(
    chartDom.value,
    day7FxDate.value,
    day7TempMax.value,
    day7TempMin.value
  );
}

</script>


<template>
  <div class="about">
    <h1>未来7日天气数据</h1>
    <p>天气最后更新时间:{{ updateTime }}</p>
    <!-- 添加图标库所需要的容器 -->
    <!-- vue3中获取dom元素的方式，此为第二步，在容器元素中添加ref属性与第一步中的引用进行绑定 -->
    <div id="main" ref="chartDom"></div>
  </div>
</template>

<style scope>
#main {
  width: 100%;
  height: 400px;
}

</style>